<template>
	<view>
		<Ytitle value='选项卡按钮' pieceColor='#1E5EFF'></Ytitle>
		<view style="padding: 30rpx;">
			<!-- 由于应用场景可能存在边距，所有组件中没有默认设置边距，可以通过父元素来控制 -->
			<YtabBtns ref="YtabBtns" :data="list" :index.sync="index" ></YtabBtns>
			
			<button @tap='getInfo'>获取</button>
		</view>

		<Ytitle value='自定义颜色' pieceColor='#1E5EFF'></Ytitle>
		<view style="padding: 30rpx;background-color: #1E5EFF;">
			<!-- 由于应用场景可能存在边距，所有组件中没有默认设置边距，可以通过父元素来控制 -->
			<YtabBtns :data="list" :index.sync="index" color='#fff' background='#1E5EFF' borderColor='#fff'></YtabBtns>
		</view>

		<Ytitle value='按钮较多时' pieceColor='#1E5EFF'></Ytitle>
		<view style="padding: 30rpx;">
			<!-- 当可选择过多时可以滑动显示 -->
			<YtabBtns :data="list1" :index.sync='index1' @change='change'></YtabBtns>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				list: [{

					name: 'Java',
					id: 1,
				}, {

					name: 'Python',
					id: 2,
				}, {

					name: 'PHP',
					id: 3,
				}, ],

				index1: 0,
				list1: [{

					name: 'Java',
					id: 1,
				}, {

					name: 'Python',
					id: 2,
				}, {

					name: 'PHP',
					id: 3,
				}, {

					name: 'C/C++',
					id: 3,
				}, {

					name: '.NET',
					id: 3,
				}, {

					name: 'JavaScript',
					id: 3,
				}, ]
			}
		},
		methods: {
			getInfo(){
				this.$refs.YtabBtns.updateIndex()
			},
			change(info) {
				// 可以通过change事件来获取切换 也可以通过watch来监听index变化来获取切换
				uni.showToast({
					title: `你点击了${info.name}`
				})
			},
		}
	}
</script>

<style>

</style>
